Imagen Redondeada

Usa la propiedad border-radius para crear imágenes con bordes redondeados:

Imagen Circular

Usa la propiedad border-radius para crear imágenes circulares:

Imagen Miniatura

Usa la propiedad border para crear imágenes miniatura:

Imagen Miniatura como Enlace

Usa la propiedad border para crear imágenes miniatura. Envuelve la imagen con un enlace para que sea clicable.

Pasa el cursor sobre la imagen y haz clic en ella para ver el efecto.

Imagen Responsiva

Las imágenes responsivas se ajustan automáticamente al tamaño de la pantalla.

Cambia el tamaño de la ventana del navegador para ver el efecto:

Imágenes/Cartas Polaroid Responsivas

FLOR

GATO CON BOTAS

Transparencia de Imagen

La propiedad opacity especifica la transparencia de un elemento. Cuanto menor sea el valor, más transparente será:

Imagen con 50% de opacidad:

Superposición con Efecto de Desvanecimiento

GATO CON BOTAS

Desvanecer una Caja

BOTAS

Superposición Deslizante desde Arriba

iCARLY

Superposición Deslizante desde Abajo

iCARLY

Superposición deslizante desde la izquierda

iCARLY

Voltear una Imagen

Pasa el ratón sobre la imagen.

Galería de Imágenes Responsiva

Redimensiona la ventana del navegador para ver el efecto.

Agrega una descripción de la imagen aquí

Agrega una descripción de la imagen aquí

Este ejemplo utiliza *media queries* para reorganizar las imágenes según el tamaño de pantalla: para pantallas mayores a 700px muestra cuatro imágenes en fila, para pantallas menores a 700px muestra dos por fila, y para pantallas menores a 500px las muestra apiladas verticalmente (100%).

Aprenderás más sobre *media queries* y diseño web responsivo en el tutorial de CSS.

Modal de Imagen

Haz clic sobre la imagen para ampliarla: